<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>店铺管理</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min
.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #EFEFEF;
        }

        .am-header-default {
            background-color: #ED6D00;
        }

        .content {
            border-top: 1px solid #F2F2F2;
            /*padding: 10px 0 15px;*/
            width: 100%;
            height: auto;
        }

        .content-left, .content-info {
            float: left;
        }

        .content-left {
            width: 85px;
        }

        .content-info .name {
            display: block;
            color: #333;
            line-height: 1em;
            font-size: 16px;
        }

        .type {
            display: inline-block;
            line-height: 1em;
            font-size: 14px;
            color: #333;
        }

        .num {
            display: inline-block;
            line-height: 1em;
            font-size: 14px;
            margin-left: 10px;
            color: #333;
        }

        .price {
            display: block;
            color: #333;
            line-height: 1em;
            margin-bottom: 5px;
            font-size: 16px;
        }

        .content-btns {
            float: right;
            margin-top: 40px;
        }

        .del-btn {
            display: inline-block;
            padding: 4px 6px;
            border: 1px solid #5F5F5F;
            color: #5F5F5F;
            line-height: 1em;
            border-radius: 5px;
            font-size: 15px;
            margin-right: 0px;
        }

        .box {
            margin-bottom: 5px;;
            line-height: 44px;
            padding-left: 10px;
            font-size: 18px;
            color: #555
        }

        .row {
            width: 100%;
            height: auto;
        }

        .top-left, .top-center {
            float: left;
        }

        .top-left {
            width: 80px;
        }

        .top-center span {
            display: block;
            line-height: 32px;
            font-size: 14px;
            color: #666;
        }

        .top-right {
            position: absolute;
            top: 16px;
            right: 10px;
        }

        .order-btn {
            display: inline-block;
            padding: 5px 10px;
            color: #EE7711;
            border: 1px solid #EE7711;
            border-radius: 5px;
        }

    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHome/userInfo" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            店铺管理
        </a>
    </h1>
    <div class="am-header-right am-header-nav">
        <a href="${pageContext.request.contextPath}/clientShopHome/storeDetail" class="">
            设置
        </a>
    </div>
</header>

<div class="am-g whiteBg" style="padding: 12px;position: relative">
    <div class="top-left">
        <img src="${pageContext.request.contextPath}/images/tx.png" width="70" alt="">
    </div>
    <div class="top-center">
        <span style="font-size: 18px;color: #333;">${shop.shopName}</span>
        <span>营业时间：${shop.onlineTime}</span>
        <span>联系方式：${shop.contractPhone}</span>
    </div>
    <div class="top-right">
        <a href="${pageContext.request.contextPath}/clientShopHome/goOrder"><span
                class="order-btn">订单管理</span></a>
    </div>
</div>

<div class="am-g whiteBg" style="margin: 10px 0;">
    <div class="am-u-sm-12" style="line-height: 44px;font-size: 18px;">
        <span style="vertical-align: middle">商品添加</span>
        <a href="${pageContext.request.contextPath}/clientShopHome/addGoods"><img
                src="${pageContext.request.contextPath}/images/plus.png" alt=""
                style="float: right;margin-top: 9px;"></a>
    </div>
</div>


<div class="am-g" id="list">
    <span style="margin-left: 10px;">商品列表</span>
    <div class="am-u-sm-12 whiteBg box" v-for="category in items">
        <div class="title" :id="'title'+category.id" v-on:click="showOrhide(category.id)">
            <span>{{category.categoryName}}</span><span style="margin-left: 10px;">{{category.goodsList.length}}</span>
            <span class="left am-icon-angle-down" style="font-size: 200%;float: right;"></span>
        </div>
        <div class="content">
            <div class="am-g" style="padding: 10px 10px 0;border-bottom: 1px solid #EFEFEF"
                 v-for="goods in category.goodsList">
                <div class="content-left">
                    <img :src="goods.imageUrl" width="75" alt="">
                </div>
                <div class="content-info">
                    <span class="name">{{goods.goodsName}}</span>
                    <span class="type"><template v-for="(item,i) in goods.goodsDetails"><span v-if="i != 0">/</span>{{item.propertyName}}</template></span><span
                        class="num">库存:{{goods.goodsDetails[0].quantity}}</span>
                    <span class="price">￥{{goods.goodsDetails[0].propertyValue}}</span>
                </div>
                <div class="content-btns">
                    <%--<a href="#"><span class="del-btn">修改</span></a>--%>
                    <a href="#" v-on:click="del(goods.id)"><span class="del-btn">删除</span></a>
                </div>
            </div>


        </div>
    </div>

</div>


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript">
    var goodsList = new Vue({
        el: "#list",
        data: {
            items: []
        },
        methods: {
            showOrhide: function (id) {
                $("#title" + id).next().toggle();
                $("#title" + id).find('.left').toggleClass('am-icon-angle-up am-icon-angle-down');
            },
            del: function (id) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/clientGoods/delete',
                    data: {
                        id: id
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            $.each(this.items, function (i, n) {
                                if (n.id == id) {
                                    goodsList.items.splice(i, 1);
                                    layer.msg("删除成功");
                                }
                            });
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function () {
                        layer.msg("服务器繁忙");
                    }
                });
            }
        }
    });
    $(function () {
        $.ajax({
            type: "get",
            url: '${pageContext.request.contextPath}/clientGoods/findAll',
            async: false,
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    goodsList.items = data.obj;

                }
            }

        });
        $("#list .am-u-sm-12 .title").each(function () {
            $(this).click(function () {
                $(this).next().toggle();
                $(this).find('.left').toggleClass('am-icon-angle-up am-icon-angle-down');
            });
        });
    })
</script>


</body>

</html>
